<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
    dhtmlxtree:setting_tree_appearance    [Skin test wiki]
  </title></head>

<body>
<div class="dokuwiki">
  
  <div class="stylehead">

    <div class="header">
    <a class="logo" href="http://dhtmlx.com" title="DHTMLX Documentation homepage"></a>
    <span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>

    <div class="search-field">
        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>    </div>
        <div class="buttons">
                <a class="doc"></a>
                <a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
        </div>
     <!-- <div class="pagename">
        [[<a href="#"  title="Backlinks">dhtmlxtree:setting_tree_appearance</a>]]
      </div>
      <div class="logo">
        <a href="/dhtmlx/_lab/wiki/doku.php"  name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">Skin test wiki</a>      </div>

      <div class="clearer"></div>-->
        
    </div>

    
<!--   <div class="bar" id="bar__top">
      <div class="bar-left" id="bar__topleft">
                <form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:setting_tree_appearance" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>      </div>

      <div class="bar-right" id="bar__topright">
        <form class="button btn_recent" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="dhtmlxtree:setting_tree_appearance" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form>        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>&nbsp;
      </div>

      <div class="clearer"></div>
    </div> -->

<!--        <div class="breadcrumbs">
      <span class="bchead">Trace:</span> <span class="bcsep">&raquo;</span> <span class="curid"><a href="/dhtmlx/_lab/wiki/doku.php?id=dhtmlxtree:setting_tree_appearance"  class="breadcrumbs" title="dhtmlxtree:setting_tree_appearance">setting_tree_appearance</a></span>    </div>
    -->

    
  </div>
  
  
  <div class="page">
    <!-- wikipage start -->
    <!-- TOC START -->
<div class="toc">
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
<div id="toc__inside">

<ul class="toc">
<li class="clear">

<ul class="toc">
<li class="level2"><div class="li"><span class="li"><a href="#setting_tree_appearance" class="toc">Setting Tree Appearance</a></span></div>
<ul class="toc">
<li class="level3"><div class="li"><span class="li"><a href="#tree_lines_and_icons_manipulation" class="toc">Tree Lines and Icons Manipulation</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#tree_images_manipulation" class="toc">Tree Images Manipulation</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#text_manipulation" class="toc">Text Manipulation</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#style_manipulation" class="toc">Style Manipulation</a></span></div></li></ul>
</li></ul>
</li></ul>
</div>
</div>
<!-- TOC END -->

<p>
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif"  class="media" alt="" /><a href="../index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><img src="icons___tree.gif"  class="media" alt="" /><a href="index.html" class="wikilink1" title="dhtmlxtree:toc">dhtmlxtree</a></div><div class='arrow'></div><div class='backlink'><span class="curid"><a href="dhtmlxtree___setting_tree_appearance.html" class="wikilink1" title="dhtmlxtree:setting_tree_appearance">  Setting Tree Appearance  </a></span></div></div>

</p>

<h2><a name="setting_tree_appearance" id="setting_tree_appearance">Setting Tree Appearance</a></h2>
<div class="level2">

</div>

<h3><a name="tree_lines_and_icons_manipulation" id="tree_lines_and_icons_manipulation">Tree Lines and Icons Manipulation</a></h3>
<div class="level3">

</div>

<h4><a name="enabling_disabling_tree_lines" id="enabling_disabling_tree_lines">Enabling/Disabling Tree Lines</a></h4>
<div class="level4">

<p>
Tree lines are tiny lines that visually “connect” elements of the tree. These lines can be enabled|disabled from script easily:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enabletreelines.html'><b><span class="me1">enableTreeLines</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|false<span class="br0">&#41;</span>; <span class="co1">// true by default</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="setting_-_icons" id="setting_-_icons">Setting +/- Icons</a></h4>
<div class="level4">

<p>

”+” and ”-” icons indicate whether a parent node is closed or opened. setImageArrays() is used to set these images:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setimagearrays.html'><b><span class="me1">setImageArrays</span></b></a><span class="br0">&#40;</span>arrayName<span class="sy0">,</span>image1<span class="sy0">,</span>image2<span class="sy0">,</span>image3<span class="sy0">,</span>image4<span class="sy0">,</span>image5<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters for this method are as follows:
</p>
<ul>
<li class="level1"><div class="li">  arrayName - name of array: plus, minus;</div>
</li>
<li class="level1"><div class="li">  image1 - line crossed image (+);</div>
</li>
<li class="level1"><div class="li">  image2 - image with top line (г);</div>
</li>
<li class="level1"><div class="li">  image3 - image with bottom line (L);</div>
</li>
<li class="level1"><div class="li">  image4 - image without line ( );</div>
</li>
<li class="level1"><div class="li">  image5 - single root image (-).</div>
</li>
</ul>

</div>

<h4><a name="showing_hiding_-_icons" id="showing_hiding_-_icons">Showing/Hiding +/- Icons</a></h4>
<div class="level4">

<p>

There is a simple way of showing/hiding +/- signs of a certain item:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_showitemsign.html'><b><span class="me1">showItemSign</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span>mode<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The following parameters should be indicated:
</p>
<ul>
<li class="level1"><div class="li">  itemId - id of the item which +/- icon will be shown/hidden;</div>
</li>
<li class="level1"><div class="li">  mode(true|false) - true stands for showing the icon, false means hiding it.</div>
</li>
</ul>

<p>
This method works only for individual items, not for the entire tree.
</p>

</div>

<h4><a name="specifying_icons_for_locked_items" id="specifying_icons_for_locked_items">Specifying Icons for Locked Items</a></h4>
<div class="level4">

<p>

If the user wants to specify the icons for locked state of tree items, they should be indicated before any of the data loading methods:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        ...
        <span class="me1">tree</span>.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setlockedicons.html'><b><span class="me1">setLockedIcons</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;lock.gif&quot;</span><span class="sy0">,</span><span class="st0">&quot;lock.gif&quot;</span><span class="sy0">,</span><span class="st0">&quot;lock.gif&quot;</span><span class="br0">&#41;</span>;
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_loadxml.html'><b><span class="me1">loadXML</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;tree.xml&quot;</span><span class="br0">&#41;</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters of setLockedIcons() method indicate paths to the icons that will be used for locked nodes:
</p>
<ul>
<li class="level1"><div class="li">  m0 - icon for a locked leaf;</div>
</li>
<li class="level1"><div class="li">  im1 - icon for a closed branch;</div>
</li>
<li class="level1"><div class="li">  im2 - icon for an opened branch.</div>
</li>
</ul>

</div>

<h3><a name="tree_images_manipulation" id="tree_images_manipulation">Tree Images Manipulation</a></h3>
<div class="level3">

</div>

<h4><a name="setting_images_for_items" id="setting_images_for_items">Setting Images for Items</a></h4>
<div class="level4">

<p>

It should be noted that the tree will get images for its nodes from the path the user specified in setImagePath() method.
</p>

<p>
But there are also other ways available for setting custom images for nodes in the tree. The difference between these two methods lies in the way the user adds item to the tree:
</p>
<ul>
<li class="level1"><div class="li"> JavaScript way - using arguments of insertNewChild() or insertNewNext() methods:</div>
</li>
</ul>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        <span class="kw2">var</span> im0 <span class="sy0">=</span> <span class="st0">&quot;doc.gif&quot;</span>; <span class="co1">// the icon for a leaf node</span>
        <span class="kw2">var</span> im1 <span class="sy0">=</span> <span class="st0">&quot;opened.gif&quot;</span>; <span class="co1">// the icon for an expanded parent node</span>
        <span class="kw2">var</span> im2 <span class="sy0">=</span> <span class="st0">&quot;closed.gif&quot;</span>; <span class="co1">// the icon for a collapsed parent node</span>
&nbsp;
&nbsp;
&nbsp;
        tree.<span class="me1">insertNewItem</span><span class="br0">&#40;</span>0<span class="sy0">,</span><span class="nu0">1</span><span class="sy0">,</span><span class="st0">&quot;New Node 1&quot;</span><span class="sy0">,</span>0<span class="sy0">,</span>im0<span class="sy0">,</span>im1<span class="sy0">,</span>im2<span class="br0">&#41;</span>;
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_insertnewnext.html'><b><span class="me1">insertNewNext</span></b></a><span class="br0">&#40;</span><span class="nu0">1</span><span class="sy0">,</span><span class="nu0">2</span><span class="sy0">,</span><span class="st0">&quot;New Node 2&quot;</span><span class="sy0">,</span>0<span class="sy0">,</span><span class="st0">&quot;txt.gif&quot;</span><span class="sy0">,</span><span class="st0">&quot;opened.gif&quot;</span><span class="sy0">,</span><span class="st0">&quot;closed.gif&quot;</span><span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre><ul>
<li class="level1"><div class="li"> JavaScript way - using setItemImage() and setItemImage2() methods:</div>
</li>
</ul>

<p>
The first method for setting an image for an item should be written this way:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setitemimage.html'><b><span class="me1">setItemImage</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span>image1<span class="sy0">,</span>image2<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters are as follows:
</p>
<ul>
<li class="level1"><div class="li"> itemId - id of the item in question;</div>
</li>
<li class="level2"><div class="li">   image1 - image for the leaf item or image for the collapsed parent item (if the third parameter is indicated);</div>
</li>
<li class="level2"><div class="li">   image2 - image for the expanded parent item.</div>
</li>
</ul>

<p>
The second setting image method is the following:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setitemimage2.html'><b><span class="me1">setItemImage2</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span>image1<span class="sy0">,</span>image2<span class="sy0">,</span> image3<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters are as follows:
</p>
<ul>
<li class="level1"><div class="li">   itemId - id of the item in question;</div>
</li>
<li class="level2"><div class="li">   image1 - image for the leaf item;</div>
</li>
<li class="level2"><div class="li">   image2 - image for the collapsed parent item;</div>
</li>
<li class="level2"><div class="li">   image3 - image for the expanded parent item.</div>
</li>
</ul>
<ul>
<li class="level1"><div class="li"> <acronym title="Extensible Markup Language">XML</acronym> way - using parameters of &lt;item&gt; tag:</div>
</li>
</ul>
<pre class="code javascript">    <span class="sy0">&lt;?</span>xml version<span class="sy0">=</span><span class="st0">'1.0'</span> encoding<span class="sy0">=</span><span class="st0">'iso-8859-1'</span><span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>tree id<span class="sy0">=</span><span class="st0">&quot;0&quot;</span><span class="sy0">&gt;</span>
            <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;My Computer&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;1&quot;</span> child<span class="sy0">=</span><span class="st0">&quot;1&quot;</span> im0<span class="sy0">=</span><span class="st0">&quot;doc.gif&quot;</span> im1<span class="sy0">=</span><span class="st0">&quot;my_opened.gif&quot;</span> im2<span class="sy0">=</span><span class="st0">&quot;my_closed.gif&quot;</span><span class="sy0">&gt;</span>
        <span class="sy0">&lt;/</span>tree<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

See <a href="dhtmlxtree___syntax_templates.html" class="wikilink1" title="dhtmlxtree:syntax_templates">XML Format Template</a>.
</p>

</div>

<h4><a name="getting_item_s_image" id="getting_item_s_image">Getting Item&#039;s Image</a></h4>
<div class="level4">

<p>

Item&#039;s image can be got with the help of getItemImage() method:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        <span class="kw2">var</span> image <span class="sy0">=</span> tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_getitemimage.html'><b><span class="me1">getItemImage</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span>imageInd<span class="sy0">,</span>fullPath<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

In order to get items image, the user should indicate:
</p>
<ul>
<li class="level1"><div class="li">  itemId - id of the item which image should be got;</div>
</li>
<li class="level1"><div class="li">  imageInd - index of the image (0 - leaf image, 1 - closed parent node image, 2 - open parent node image);</div>
</li>
<li class="level1"><div class="li">  fullPath (true|false) - indicates whether the method returns full path to the image (true), or just name of the image file (false).</div>
</li>
</ul>

</div>

<h4><a name="enabling_tree_images" id="enabling_tree_images">Enabling Tree Images</a></h4>
<div class="level4">

<p>

Images are enabled in dhtmlxTree by default. To disable images, the user should call the following method:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enabletreeimages.html'><b><span class="me1">enableTreeImages</span></b></a><span class="br0">&#40;</span><span class="kw2">false</span><span class="br0">&#41;</span>; <span class="co1">// true to enable</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="setting_default_item_s_images" id="setting_default_item_s_images">Setting Default Item&#039;s Images</a></h4>
<div class="level4">

<p>

There is a simple way of setting default item&#039;s images in dhtmlxTree:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setstdimages.html'><b><span class="me1">setStdImages</span></b></a><span class="br0">&#40;</span>image1<span class="sy0">,</span>image2<span class="sy0">,</span>image3<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

This method should be called before <acronym title="Extensible Markup Language">XML</acronym> loading takes place. It is useful when a lot of similar images are going to be used in the tree, it is better to use this method once rather than specify these images every time for every item.
</p>

<p>
The parameters that the user should specify are the following:
</p>
<ul>
<li class="level1"><div class="li">  image1 - image for a leaf node;</div>
</li>
<li class="level1"><div class="li">  image2 - image for a closed parent node;</div>
</li>
<li class="level1"><div class="li">  image3 - image for an opened parent node.</div>
</li>
</ul>

</div>

<h4><a name="changing_icon_sets" id="changing_icon_sets">Changing Icon Sets</a></h4>
<div class="level4">

<p>

dhtmlxTree is a highly customizable component. You can use different icon sets for trees simply by changing image path:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setimagepath.html'><b><span class="me1">setImagePath</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/codebase/images/&quot;</span><span class="br0">&#41;</span>; <span class="co1">// the default icons set</span>
            <span class="co1">// or</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setimagepath.html'><b><span class="me1">setImagePath</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/codebase/images/csh_scbrblue/&quot;</span><span class="br0">&#41;</span>;
            <span class="co1">// or</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setimagepath.html'><b><span class="me1">setImagePath</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/codebase/images/csh_yellowbooks/&quot;</span><span class="br0">&#41;</span>;
            <span class="co1">// or</span>
        ...
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="setting_icon_s_size" id="setting_icon_s_size">Setting Icon&#039;s Size</a></h4>
<div class="level4">

<p>

Setting icon&#039;s size is quite simple with setIconSize() method. The default size of tree icons is 18&times;18 px.

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_seticonsize.html'><b><span class="me1">setIconSize</span></b></a><span class="br0">&#40;</span>newWidth<span class="sy0">,</span>newHeight<span class="sy0">,</span>itemId<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters the user should specify are:
</p>
<ul>
<li class="level1"><div class="li">  newWidth - new width for the icon;</div>
</li>
<li class="level1"><div class="li">  newHeight- new height for the icon;</div>
</li>
<li class="level1"><div class="li">  itemId - the item new sizes will be applied to (optional parameter).</div>
</li>
</ul>

<p>
If the last parameter is not indicated, new sizes will be applied to all icons in the tree.
</p>

</div>

<h4><a name="making_images_clickable" id="making_images_clickable">Making Images Clickable</a></h4>
<div class="level4">

<p>

There is a simple method used to make all images in the tree clickable:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enableactiveimages.html'><b><span class="me1">enableActiveImages</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|fasle<span class="br0">&#41;</span>; <span class="co1">// enabled by default</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="enabling_image_dragging" id="enabling_image_dragging">Enabling Image Dragging</a></h4>
<div class="level4">

<p>

There is a method that is responsible for allowing the user to drag items not only by text, but also by their images. This functionality is enabled by default

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enableimagedrag.html'><b><span class="me1">enableImageDrag</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|false<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="enabling_ie_images_fixing" id="enabling_ie_images_fixing">Enabling IE Images Fixing</a></h4>
<div class="level4">

<p>

There is a special method to change the way of images rendering in <acronym title="Internet Explorer">IE</acronym>. It also helps to solve the problem of images caching in <acronym title="Internet Explorer">IE</acronym>:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enableieimagefix.html'><b><span class="me1">enableIEImageFix</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|false<span class="br0">&#41;</span>; <span class="co1">// disabled by default</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h3><a name="text_manipulation" id="text_manipulation">Text Manipulation</a></h3>
<div class="level3">

</div>

<h4><a name="setting_text_direction" id="setting_text_direction">Setting text Direction</a></h4>
<div class="level4">

<p>

dhtmlxTree support bot LTR and RTL text directions. LTR is set by default in the tree. The user can set the text direction to RTL like this:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablertl.html'><b><span class="me1">enableRTL</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span>; <span class="co1">// false to disable</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

To set text direction to LTR again, use false in the above mentioned method.
</p>

</div>

<h4><a name="enabling_multiline" id="enabling_multiline">Enabling Multiline</a></h4>
<div class="level4">

<p>

By default tree nodes&#039; labels can contain only one text line. However, in some situations it can be useful to make them multiline. There is a special method for this in dhtmlxTree. It is recommended to turn tree lines off for better appearance:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enabletreelines.html'><b><span class="me1">enableTreeLines</span></b></a><span class="br0">&#40;</span><span class="kw2">false</span><span class="br0">&#41;</span>; 
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablemultilineitems.html'><b><span class="me1">enableMultiLineItems</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|false|width<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

This method should be called before loading tree data takes place.
The parameter of this method can be one of these options:
</p>
<ul>
<li class="level1"><div class="li">  true - the multiline is enabled;</div>
</li>
<li class="level1"><div class="li">  false - the multiline is disabled;</div>
</li>
<li class="level1"><div class="li">  width - the multiline is enabled and set in pixels (for example, “50px”).</div>
</li>
</ul>

</div>

<h4><a name="setting_text_signs" id="setting_text_signs">Setting Text Signs</a></h4>
<div class="level4">

<p>

There is the possibility to enable|disable text signs [+] and [-] instead of corresponding icons. This can be done in the following way:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree. <span class="me1">enableTextSigns</span><span class="br0">&#40;</span>mode<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

Setting this method to true equals enabling text signs for the tree, while false means disabling them.
</p>

</div>

<h4><a name="making_plain_text_tree" id="making_plain_text_tree">Making Plain Text Tree</a></h4>
<div class="level4">

<p>

There is also the possibility to create a plain one-level tree. The steps the user should take for this are quite simple:
</p>
<ul>
<li class="level1"><div class="li">  Add the following style in the html file where the tree will be created:</div>
</li>
</ul>
<pre class="code javascript">    <span class="sy0">&lt;</span>style<span class="sy0">&gt;</span>
         #treeboxbox_tree.<span class="me1">standartTreeImage</span> img<span class="br0">&#123;</span>
             width<span class="sy0">:</span>0px;
         <span class="br0">&#125;</span>
    <span class="sy0">&lt;/</span>style<span class="sy0">&gt;</span>
&nbsp;</pre><ul>
<li class="level1"><div class="li">  Create a div element on page and write the following script lines:</div>
</li>
</ul>
<pre class="code javascript">    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;treeboxbox_tree&quot;</span> style<span class="sy0">=</span><span class="st0">&quot;width:200;height:200&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree<span class="sy0">=</span><span class="kw2">new</span> dhtmlXTreeObject<span class="br0">&#40;</span><span class="st0">&quot;treeboxbox_tree&quot;</span><span class="sy0">,</span><span class="st0">&quot;100%&quot;</span><span class="sy0">,</span><span class="st0">&quot;100%&quot;</span><span class="sy0">,</span>0<span class="br0">&#41;</span>;
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setimagepath.html'><b><span class="me1">setImagePath</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;[full path to this folder]/imgs/&quot;</span><span class="br0">&#41;</span>;
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enabletreeimages.html'><b><span class="me1">enableTreeImages</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;false&quot;</span><span class="br0">&#41;</span>; <span class="co1">// disable tree images</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enabletreelines.html'><b><span class="me1">enableTreeLines</span></b></a><span class="br0">&#40;</span><span class="st0">&quot;false&quot;</span><span class="br0">&#41;</span>; <span class="co1">// disable tree lines</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_loadxml.html'><b><span class="me1">loadXML</span></b></a><span class="br0">&#40;</span>file<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="enabling_loading_text" id="enabling_loading_text">Enabling Loading Text</a></h4>
<div class="level4">

<p>

The user can set loading text for a tree item. This text will appear on item loading instead of its original text, and will be replaced by the original text when loading is done:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enableloadingitem.html'><b><span class="me1">enableLoadingItem</span></b></a><span class="br0">&#40;</span>text<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The default loading text set in dhtmlxTree is “Loading…”.
</p>

</div>

<h4><a name="using_html_in_item_s_text" id="using_html_in_item_s_text">Using HTML in Item&#039;s Text</a></h4>
<div class="level4">

<p>

The user may use escaped <acronym title="HyperText Markup Language">HTML</acronym> in text attribute of item tag to include some <acronym title="HyperText Markup Language">HTML</acronym> into node&#039;s label, or he can use nested &lt;itemtext&gt; tag with CDATA for the same:

</p>
<pre class="code javascript">    <span class="sy0">&lt;?</span>xml version<span class="sy0">=</span><span class="st0">&quot;1.0&quot;</span><span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>tree id<span class="sy0">=</span><span class="st0">&quot;0&quot;</span><span class="sy0">&gt;</span>
          <span class="sy0">&lt;</span>item id<span class="sy0">=</span><span class="st0">&quot;1&quot;</span> text<span class="sy0">=</span><span class="st0">&quot;&amp;amp;lt; img src='some.gif' &amp;amp;gt;&quot;</span> <span class="sy0">/&gt;</span> <span class="co1">// using escaped HTML in text attribute</span>
        <span class="sy0">&lt;/</span>tree<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>tree id<span class="sy0">=</span><span class="st0">&quot;0&quot;</span><span class="sy0">&gt;</span>
          <span class="sy0">&lt;</span>item id<span class="sy0">=</span><span class="st0">&quot;1&quot;</span><span class="sy0">&gt;</span>
             <span class="sy0">&lt;</span>itemtext<span class="sy0">&gt;&lt;!</span><span class="br0">&#91;</span>CDATA <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">'some.gif'</span><span class="sy0">&gt;</span> <span class="br0">&#93;</span><span class="br0">&#93;</span><span class="sy0">&gt;&lt;/</span>itemtext<span class="sy0">&gt;</span> <span class="co1">// using nested &lt;itemtext&gt; tag with CDATA</span>
          <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
        <span class="sy0">&lt;/</span>tree<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h3><a name="style_manipulation" id="style_manipulation">Style Manipulation</a></h3>
<div class="level3">

</div>

<h4><a name="setting_individual_style_for_item" id="setting_individual_style_for_item">Setting Individual Style for Item</a></h4>
<div class="level4">

<p>

The user can set individual style for any item in the tree in the following way:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setitemstyle.html'><b><span class="me1">setItemStyle</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span>style_string<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters here are responsible for:
</p>
<ul>
<li class="level1"><div class="li">  itemId - id of the item;</div>
</li>
<li class="level1"><div class="li">  style_string - valid <acronym title="Cascading Style Sheets">CSS</acronym> string.</div>
</li>
</ul>

</div>

    <!-- wikipage stop -->
  </div>

  <div class="clearer">&nbsp;</div>

  
  <div class="stylefoot">

    <div class="meta">
      <div class="user">
              </div>
     <!-- <div class="doc">
        dhtmlxtree/setting_tree_appearance.txt &middot; Last modified: 2009/07/30 12:56 (external edit)      </div>
    </div>-->

   
    <!--<div class="bar" id="bar__bottom">-->
      <!--<div class="bar-left" id="bar__bottomleft">-->
        <!---->
        <!--<form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:setting_tree_appearance" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
      <!--</div>-->
      <!--<div class="bar-right" id="bar__bottomright">-->
        <!---->
        <!---->
        <!---->
        <!---->
        <!--<form class="button btn_login" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="login" /><input type="hidden" name="sectok" value="91aaec1f6dba3c9cb8948111e51d2abb" /><input type="hidden" name="id" value="dhtmlxtree:setting_tree_appearance" /><input type="submit" value="Login" class="button" title="Login" /></div></form>-->
        <!--<form class="button btn_index" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="dhtmlxtree:setting_tree_appearance" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
        <!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a>&nbsp;-->
      <!--</div>-->
      <!--<div class="clearer"></div>-->
    <!--</div>-->

  </div>

  

</div>

<div class="footerinc">


</div>

<div class="no"><img src="/dhtmlx/_lab/wiki/lib/exe/indexer.php?id=dhtmlxtree%3Asetting_tree_appearance&amp;1257950452" width="1" height="1" alt=""  /></div>
     <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
            	    </div>
</body>
</html>
